@CHARSET "ISO-8859-1";

html,body{
	height:900px;	
	font-family: Georgia, Times new roman, serif;
}

body {	
	margin:0px;
	overflow-x:hidden;
	overflow-y:hidden;
}

h1 {
	font-size: 24px;
}

p {
	font-size: 20px;	
}

#trainingcontent {
	font-size: 14px;
}

#menu {
	display:block;
	position: fixed;
	background-color:#424242;
	height:0px;
	width:100%;
	margin:0px;
	border-radius:3px;
	-moz-border-radius:10px; /* Old Firefox */
	box-shadow: 4px 4px 2px grey;
	z-index:5000;
}

#menu ul { 
	padding-top:7px; 
	padding-left:100px;
	margin:0; 
	list-style:none;
}

#menu li { 
	float:left; 
	width:150px;
	height:30px;
	border-radius:5px;
	background-color:#0489B1;
	margin:3px
}

#menu ul li a {
	display:block; 
	font-size:18px; 
	margin-top:2px; 
	margin-left:3px;
	padding:3px; 
	text-decoration:none; 
	color:white;
	text-align:center;
}

#menu ul li a:hover { 
	border-radius:5px;
	box-shadow: 2px 2px 1px #848484;
    -webkit-animation-name: myfirst;
    -webKit-animation-duration: 0.5s; 
    -webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */	
	animation: myfirst;
	animation-duration:0.5s;
	animation-fill-mode: forwards;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst 
{
	from {background: #0489B1;}
    to {background: #FF8000;}
}

/* Standard syntax */
@keyframes myfirst 
{
	from {background: #0489B1;}
    to {background: #FF8000;}
}

#homepage {
	position: relative;
	width:100%;
	height:100%;	
	background-image: url(../images/Logos/Background-04-2.jpg);
}

#welcombox {
	width:60%;
	height:100%;
	margin-left:auto;
	margin-right:auto;
	padding:80px 60px 60px 60px;
	background-image: url(../images/Logos/background-03.jpg);
}

#welcome {
	padding:20px;
}

#menuphoto {
	//-webkit-perspective: 800;
	-webkit-perspective-origin: 50% 50%;
	-webkit-transform-style: -webkit-preserve-3d;	
	height:100%;
	padding:20px;
}

.menubox {
	cursor: pointer;
	text-align:center;
	border: 1px #99C2EB solid;
	border-radius: 10px;
	width: 180px;
	height: 180px;
	position: absolute;
	box-shadow: inset 0 0 30px rgba(153, 194, 235, 0.6);	
}

.menutext {
	color: #006;
	font-size: 20px;
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg); /* Standard syntax */	    
}

#photowelcome {
	margin-left:0%;
	margin-top:5%;
    -webkit-animation-name: welcomeshow;
    -webKit-animation-duration: 3s; 
    -webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */	
	animation: welcomeshow;
	animation-duration:3s;
	animation-fill-mode: forwards;
}

.menubox:hover {
	box-shadow: inset 0 0 30px #58ACFA;
}

#phototraining {
	margin-left:22%;
	margin-top:5%;
    -webkit-animation-name: trainingshow;
    -webKit-animation-duration: 3s; 
    -webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */	
	animation: trainingshow;
	animation-duration:3s;
	animation-fill-mode: forwards;
}

#photoproject {
	margin-left:44%;
	margin-top:5%;
    -webkit-animation-name: projectshow;
    -webKit-animation-duration: 3s; 
    -webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */	
	animation: projectshow;
	animation-duration:3s;
	animation-fill-mode: forwards;
}

#photocourse {
	margin-left:11%;
	margin-top:16%;
    -webkit-animation-name: courseshow;
    -webKit-animation-duration: 3s; 
    -webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */	
	animation: courseshow;
	animation-duration:3s;
	animation-fill-mode: forwards;
}

#photocontact {
	margin-left:33%;
	margin-top:16%;
    -webkit-animation-name: contactshow;
    -webKit-animation-duration: 3s; 
    -webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */	
	animation: contactshow;
	animation-duration:3s;
	animation-fill-mode: forwards;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes welcomeshow 
{
	from {transform:rotateX(0deg) rotateZ(0deg) scale(0);
    			-webkit-transform:rotateX(0deg) rotateZ(0deg) scale(0);}
    to {transform:rotateY(360deg) rotateZ(675deg) scale(1);
    	-webkit-transform:rotateY(360deg) rotateZ(675deg) scale(1);}             
}
/* Standard syntax */
@keyframes welcomeshow 
{
	from {transform:rotateX(0deg) rotateZ(0deg) scale(0);
    			-webkit-transform:rotateX(0deg) rotateZ(0deg) scale(0);}
    to {transform:rotateY(360deg) rotateZ(315deg) scale(1);
    	-webkit-transform:rotateY(360deg) rotateZ(315deg) scale(1);}   
}

/* Chrome, Safari, Opera */
@-webkit-keyframes trainingshow 
{
	from {transform:rotateX(21deg) rotateY(0deg) rotateZ(14deg) scale(0);
    			-webkit-transform:rotateX(21deg) rotateY(0deg) rotateZ(14deg) scale(0);}
    to {transform:rotateX(0deg) rotateY(360deg) rotateZ(315deg) scale(1);
    	-webkit-transform:rotateX(0deg) rotateY(360deg) rotateZ(315deg) scale(1);}              
}
/* Standard syntax */
@keyframes trainingshow 
{
	from {transform:rotateX(21deg) rotateY(0deg) rotateZ(14deg) scale(0);
    			-webkit-transform:rotateX(21deg) rotateY(0deg) rotateZ(14deg) scale(0);}
    to {transform:rotateX(0deg) rotateY(360deg) rotateZ(315deg) scale(1);
    	-webkit-transform:rotateX(0deg) rotateY(360deg) rotateZ(315deg) scale(1);}       
}

/* Chrome, Safari, Opera */
@-webkit-keyframes projectshow 
{
	from {transform:rotateX(18deg) rotateY(77deg) rotateZ(62deg) scale(0);
    			-webkit-transform:rotateX(18deg) rotateY(77deg) rotateZ(62deg) scale(0);}
    to {transform:rotateX(360deg) rotateY(0deg) rotateZ(315deg) scale(1);
    	-webkit-transform:rotateX(360deg) rotateY(0deg) rotateZ(315deg) scale(1);}             
}
/* Standard syntax */
@keyframes projectshow 
{
	from {transform:rotateX(18deg) rotateY(77deg) rotateZ(62deg) scale(0);
    			-webkit-transform:rotateX(18deg) rotateY(77deg) rotateZ(62deg) scale(0);}
    to {transform:rotateX(360deg) rotateY(0deg) rotateZ(315deg) scale(1);
    	-webkit-transform:rotateX(360deg) rotateY(0deg) rotateZ(315deg) scale(1);}       
}

/* Chrome, Safari, Opera */
@-webkit-keyframes courseshow 
{
	from {transform:rotateX(70deg) rotateY(45deg) rotateZ(17deg) scale(0);
    			-webkit-transform:rotateX(70deg) rotateY(45deg) rotateZ(17deg) scale(0);}
    to {transform:rotateX(360deg) rotateY(360deg) rotateZ(315deg) scale(1);
    	-webkit-transform:rotateX(360deg) rotateY(360deg) rotateZ(315deg) scale(1);}             
}
/* Standard syntax */
@keyframes courseshow 
{
	from {transform:rotateX(70deg) rotateY(45deg) rotateZ(17deg) scale(0);
    			-webkit-transform:rotateX(70deg) rotateY(45deg) rotateZ(17deg) scale(0);}
    to {transform:rotateX(360deg) rotateY(360deg) rotateZ(315deg) scale(1);
    	-webkit-transform:rotateX(360deg) rotateY(360deg) rotateZ(315deg) scale(1);}      
}

/* Chrome, Safari, Opera */
@-webkit-keyframes contactshow 
{
	from {transform:rotateX(101deg) rotateY(13deg) rotateZ(59deg) scale(0);
    			-webkit-transform:rotateX(101deg) rotateY(13deg) rotateZ(59deg) scale(0);}
    to {transform:rotateX(360deg) rotateY(360deg) rotateZ(315deg) scale(1);
    	-webkit-transform:rotateX(360deg) rotateY(360deg) rotateZ(315deg) scale(1);}             
}
/* Standard syntax */
@keyframes contactshow 
{
	from {transform:rotateX(101deg) rotateY(13deg) rotateZ(59deg) scale(0);
    			-webkit-transform:rotateX(101deg) rotateY(13deg) rotateZ(59deg) scale(0);}
    to {transform:rotateX(360deg) rotateY(360deg) rotateZ(315deg) scale(1);
    	-webkit-transform:rotateX(360deg) rotateY(360deg) rotateZ(315deg) scale(1);}       
}

#training {
	position: relative;
	width:100%;
	height:100%;
	padding:60px;
	background-image: url(../images/Logos/Background-04-3.jpg);
}

#photobox {
	margin-top:10px;
	height:70%;
	width:100%;
}

.photowall {
	position:absolute;
	margin:10px;
	height:200px;
	width:200px;
	border-radius:3px;	
	-moz-border-radius:3px; /* Old Firefox */
	box-shadow: 6px 6px 2px grey;
	//float:left;
	
    -webkit-transition: width 0.7s, height 0.7s; /* For Safari 3.1 to 6.0 */
    transition: width 0.7s, height 0.7s;	
}

.photowall:hover {
    width: 400px;
    height: 300px;
    //-webkit-transform: rotate(720deg); /* Chrome, Safari, Opera */
    //transform: rotate(720deg);
    z-index:1001;	
}

#photo1 {
	left:42%;
	top:8%;
}

#photo2 {
	left:55%;
	top:8%;
}

#photo3 {
	left:68%;
	top:8%;
}

#photo4 {
	left:42%;
	top:30%;
}

#photo5 {
	left:55%;
	top:30%;
}

#photo6 {
	left:68%;
	top:30%;
}

#photo7 {
	left:42%;
	top:52%;
}

#photo8 {
	left:55%;
	top:52%;
}

#photo9 {
	left:68%;
	top:52%;
}

#photo10 {
	left:55%;
	top:52%;
}

#projects {
	position: relative;
	width:100%;
	height:100%;
	padding:60px;
	background-image: url(../images/Logos/Background-04-3.jpg);
}

#courses {
	position: relative;
	width:100%;
	height:100%;
	padding:60px;
	background-image: url(../images/Logos/Background-04-3.jpg);
}

#contact {
	position: relative;
	width:100%;
	height:100%;
	padding:50px;
	background-color: black;
}

#contactbox {
	width:70%;
	height:100%;
	margin-left:auto;
	margin-right:auto;
	padding:150px 60px 60px 60px;
	background-image: url(../images/Logos/background-09-02.jpg);
}

#circle	{
	border-radius: 50%;
	width: 18px;
	height: 18px; 
	box-shadow: 4px 2px rgba(0, 0, 0, 0.6);
	background-color:#FFFF00;
}

#contactinfo {
	width:350px;
	height:160px;	
	padding:10px 20px 40px 40px;		
	margin-left:60px;
	background-image: url(../images/Logos/bianqian.jpg);
	background-repeat: no-repeat;
	box-shadow: 9px 5px rgba(0, 0, 0, 0.6);
	-webkit-transform: rotate(12deg);
	transform: rotate(12deg);
}

#contactinfo h1 {
	font-size: 20px;
}
#contactinfo h2,p {
	font-size: 14px;
}

#footer {position: fixed; bottom: 0px; width:100%; height:0px; text-align: center; font-style: normal; font-variant: small-caps; font-size:10pt;
                     color: black; padding:8px; background-color:#BDBDBD;}
